<template>
  <div class="order-home">
    <div class="order-tab">
      <p
        class="tab-item"
        @click="cur = item.id"
        :class="cur === item.id ? 'tab-cur' : ''"
        v-for="item in path"
        :key="item.id"
      >
        {{ item.name }}
      </p>
    </div>
    <div class="order-cont">
        <component :is="components[cur]"></component>
    </div>
  </div>
</template>

<script>
import myorder from './myorder'
import password from './password'
import reservation from './reservation'
export default {
  name: 'order',
  components: {
    myorder,
    password,
    reservation
  },
  data () {
    return {
      path: [
        { name: '我的订单', id: 0 },
        // { name: '我的预约单', id: 1 },
        { name: '密码维护', id: 2 }
      ],
      cur: 0,
      components: [myorder, reservation, password]
    }
  }
}
</script>

<style scoped lang="less">
.order-home {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  padding-bottom: 56px;
  .order-tab {
    width: 100%;
    max-width: 1274px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border: 1px solid #f4f4f4;
    padding: 22px 32px;
    .tab-item {
      margin-right: 20px;
      cursor: pointer;
      padding-bottom: 5px;
    }
    .tab-cur {
      color: #009769;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 10px;
        height: 3px;
        background: #009769;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0px;
        margin: 0 auto;
      }
    }
  }
}
</style>
